<template>
  <div class="box">
    <aside class="animate__animated animate__bounceInLeft sidebar">
      <div class="avatar">
        <img :src="selfImage" title="cheegon">
      </div>
      <nav class="nav">
        <a v-for="intro in introduceList" @click="showSection(intro.name)" :key="intro.id"><i :class="intro.icon" style="margin-right: 10px"></i> {{intro.title}}</a>
      </nav>
    </aside>
    <main>
      <section class="animate__animated animate__fadeInRight" v-if="showSectionId === '#info'" id="info">
        <div class="wrap">
          <h2 class="title"><i class="iconfont icon-gerenzhongxin1"></i> 个人资料</h2>
          <el-row :gutter="20" class="row">
            <el-col :sm="8" :xs="24" class="col-l-4">
              <p><i class="iconfont icon-name" style="margin-right: 5px"></i>姓名：cheegon</p>
              <p><i class="iconfont icon-sex" style="margin-right: 5px"></i>性别：男</p>
              <p><i class="iconfont icon-nianling" style="margin-right: 5px"></i>年龄：0</p>
              <p><i class="iconfont icon-xueli" style="margin-right: 5px"></i>学历：本科</p>
              <p><i class="iconfont icon-qq1" style="margin-right: 5px"></i>QQ：125179415</p>
              <p><i class="iconfont icon-shengao" style="margin-right: 5px"></i>身高：175cm</p>
              <p><i class="iconfont icon-icon1" style="margin-right: 5px"></i>体重：67kg</p>
              <p><i class="iconfont icon-shouye" style="margin-right: 5px"></i>血型：B</p>
            </el-col>
            <el-col :sm="16" :xs="24" class="col-l-4">
<!--              <p><i class="iconfont icon-chushengriqi" style="margin-right: 5px"></i>出生日期：5999-07-05</p>-->
              <p><i class="iconfont icon-xuexiao1" style="margin-right: 5px"></i>学校：太原科技大学</p>
              <p><i class="iconfont icon-zhuanye1" style="margin-right: 5px"></i>专业：网络工程</p>
              <p><i class="iconfont icon-xuefen" style="margin-right: 5px"></i>毕业：2013</p>
              <p><i class="iconfont icon-gitee-fill-round" style="margin-right: 5px"></i>码云仓库：<a href="https://gitee.com/cheegon" target="_blank">https://gitee.com/cheegon</a></p>
<!--              <p><i class="iconfont icon-csdn1" style="margin-right: 5px"></i>CSDN博客：<a href="https://blog.csdn.net/weixin_44996854">https://blog.csdn.net/weixin_44996854</a></p>-->
              <p><i class="iconfont icon-email" style="margin-right: 5px"></i>邮箱：<a href="mailto:cheegon@qq.com">cheegon@qq.com</a></p>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#skills'" id="skills">
        <div class="wrap">
          <h2 class="title"><i class="iconfont icon-zhuanye"></i> 掌握的技能</h2>
          <el-row :gutter="40" class="row scrollable">
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-html"></i>
              </div>
              <div class="skills-title">
                <h3>开发语言</h3>
                <p>熟练掌握 HTML5、CSS3、JS（ES6+）、java、kotlin等开发语言</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-css1"></i>
              </div>
              <div class="skills-title">
                <h3>多端开发</h3>
                <p>熟练掌握h5、uni-app、原生微信小程序、android、混合应用、springboot后端等多端开发</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-logo-javascript"></i>
              </div>
              <div class="skills-title">
                <h3>数据库</h3>
                <p>熟练使用 Mysql、Oracle、Sqlite、Redis</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="40" class="row scrollable">
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-Vue"></i>
              </div>
              <div class="skills-title">
                <h3>Vue</h3>
                <p>熟练掌握Vue的开发流程，能独立开发Vue应用、微信小程序、uniapp等</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-java"></i>
              </div>
              <div class="skills-title">
                <h3>Java</h3>
                <p>熟练掌握Java语言，能使用SpringBoot进行后端开发</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-shujujiegou-01"></i>
              </div>
              <div class="skills-title">
                <h3>kotlin</h3>
                <p>熟练掌握kotlin，能独立开发android应用</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="40" class="row scrollable">
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-Vue"></i>
              </div>
              <div class="skills-title">
                <h3>项目部署</h3>
                <p>熟练使用Linux、Nginx、ftp、sftp进行项目部署</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-java"></i>
              </div>
              <div class="skills-title">
                <h3>构建工具</h3>
                <p>熟练使用 Webpack、Vite、Nodejs、Gradle 、Maven进行项目构建</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-shujujiegou-01"></i>
              </div>
              <div class="skills-title">
                <h3>设计模式</h3>
                <p>熟练掌握MVC、MVP、MVVM框架设计模式</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="40" class="row scrollable">
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-Vue"></i>
              </div>
              <div class="skills-title">
                <h3>开发框架</h3>
                <p>熟练使用vue、ElementUi、uView、axios、vue-route、springboot、echart、mpandroidchart等框架</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-java"></i>
              </div>
              <div class="skills-title">
                <h3>版本控制</h3>
                <p>熟练使用SVN、 Git、Sourcetree等代码管理工具</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="iconfont icon-shujujiegou-01"></i>
              </div>
              <div class="skills-title">
                <h3>开发工具</h3>
                <p>熟练使用Visual Studio Code、Webstorm、 IntelliJ IDEA、android studio、微信开发者工具、HBuilder X</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#works'" id="works">
        <div class="wrap">
          <h2 class="title"><i class="iconfont icon-zuopin1"></i>个人作品</h2>
          <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :lg="8" v-for="work in workList" :key="work.id">
              <div class="works-item">
                <el-card class="works-item-front">
                  <el-image :src="work.pic_url"/>
                  <p>{{work.name}}</p>
                </el-card>
                <el-card class="works-item-back">
                  <p class="p_1">项目简介：</p>
                  <p style="margin-top: 0px;margin-bottom: 0px;color: #666666">{{work.desp}}</p>
                  <p class="p_1">技术栈：</p>
                  <p style="margin-top: 0px;margin-bottom: 0px;color: #666666">{{work.technique}}</p>
                  <p class="p_1">链接地址：</p>
                  <div v-if="work.list">
                    <p style="margin-top: 0px;margin-bottom: 0px" v-for="(item,index) in work.list" :key="index">{{ item.title}}
                      <a v-if="!item.isNoLink" :href="item.url" target="_blank">{{item.url}}</a>
                      <span v-else >{{item.url}}</span>
                    </p>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#hobbys'" id="hobbys">
          <h2 class="title"><i class="iconfont icon-xingquaihao"></i>我的爱好</h2>
          <div class="row">
            <el-carousel :interval="2000" :type="cardOpen? 'card':''" height="350px">
              <el-carousel-item v-for="hobby in hobbyList" :key="hobby.id">
                <el-card class="hobby">
                  <el-image style="width: 100%" :src="hobby.pic_url"></el-image>
                  <h3 class="tit">{{hobby.name}}</h3>
                  <p>{{hobby.desp}}</p>
                </el-card>
              </el-carousel-item>
            </el-carousel>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#summary'" id="summary">
        <div class="wrap">
          <h2 class="title"><i class="iconfont icon-ziwopingjia"></i>自我评价</h2>
          <div class="row">
            <ul>
              <li>一个对一切未知的事物都会抱有好奇心的人</li>
              <li>一个希望用自己所有的精力将事情做到最尽可能完美的人</li>
              <li>一个喜欢拥抱不确定性，爱折腾，去见不同的人，感受不同的环境，不喜欢一成不变的人</li>
            </ul>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import { curr_evn } from '@/config/envConfig'

export default {
  data() {
    return {
      selfImage:`${curr_evn.imageUrl}/ic_self.jpg`,
      screenWidth: document.documentElement.clientWidth,  //实时屏幕宽度,
      showSectionId: '#info',
      introduceList: [
        {
          id: 0,
          title: '资料',
          name: '#info',
          icon:'iconfont icon-zhuanye1'
        },
        {
          id: 1,
          title: '技能',
          name: '#skills',
          icon:'iconfont icon-jinengliang-xian'
        },
        {
          id: 2,
          title: '作品',
          name: '#works',
          icon:'iconfont icon-zuopin'
        },
        // {
        //   id: 3,
        //   title: '爱好',
        //   name: '#hobbys',
        //   icon:'iconfont icon-xingquaihao'
        // },
        {
          id: 4,
          title: '评价',
          name: '#summary',
          icon:'iconfont icon-ziwopingjia'
        },
      ],
      workList:[
        {
          id:0,
          name:'个人博客 vue + springboot',
          desp:'一个简单的个人博客项目，分为前台展示和后台管理系统，前台展示部分实现了博客的浏览，查找，分类，标签，评论，留言等功能，后台管理系统实现了博客发表，博客管理，用户管理等功能。',
          technique:'Vue2 + Vuex + Axios + ElementUi + Webpack +  Springboot2 +  mysql + Echart',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-35-04.jpg`,
          list:[
            {
              title:'体验地址(当前博客):',
              url:'https://cheegon.cn/',
            },
            {
              title:'仓库地址:',
              url:'https://gitee.com/cheegon/blog-h5',
            },
            {
              title:'登录体验:',
              isNoLink:true,
              url:'账号test     密码:123456',
            }
          ]
        },
        {
          id:1,
          name:'执米商城  vue + springboot',
          desp:'实现了商城后台管理用户账号(登录，退出，用户管理，权限管理)，商品管理(商品分类，分类参数，商品信息，订单)，数据统计等功能',
          technique:'Vue2 + Vuex + Axios + Vant UI + ElementUi + Webpack +  Springboot2 + redis + mysql + Echart',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-34-23.jpg`,
          list:[
            {
              title:'H5端(测试地址):',
              url:'https://shop-test.gold-v.com/m/?id=887'
            },
            {
              title:'管理端(测试地址):',
              url:'https://loft-test.gold-v.com/'
            }
          ]
        },
        {
          id:2,
          name:'执米背调  vue + springboot ',
          desp:'用于企业进行员工背景调查以及个人进行背景自查',
          technique:'Vue2 + Vuex + Axios + Vant UI + ElementUi + Webpack +  Springboot2 + redis + mysql + Echart',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-32-11.jpg`,
          list:[
            {
              title:'官网:',
              url:'https://www.szgold.com.cn/'
            },
            {
              title:'下单端(测试地址):',
              url:'https://bzy-test.gold-v.com/#/'
            },
            {
              title:'核验端(测试地址):',
              url:'https://bzy-test.gold-v.com/main#/'
            },
            {
              title:'管理端(测试地址):',
              url:'https://bzy-test.gold-v.com/operate#/'
            }
          ]
        },
        {
          id:3,
          name:'金赢在线  android app + 小程序 + vue管理端 + 官网',
          desp:'一款用于行情展示、黄金T+D交易以及期货交易的app',
          technique:'Vue2 + Android + MpAndroidChart + Socket +java + kotlin',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-54-16.jpg`,
          list:[
            {
              title:'官网:',
              url:'https://www.gold-v.com/'
            },
            {
              title:'app下载地址:',
              url:'https://m.gold-v.com/download'
            }
          ]
        },
        {
          id:4,
          name:'银行社保缴费系统  vue + springboot ',
          desp:'用于银行进行个人社保缴费和税局批量扣费的程序',
          technique:'Vue2 + Http + Socket + IBM MQ +  Springboot2 + Oracle',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-59-25.jpg`
        },
        {
          id:5,
          name:'忠县家园  微信小程序 + springboot + vue管理端',
          desp:'一款包含的常规购物功能的小程序',
          technique:'Vue2 + uniapp + ElementUi + Webpack +  Springboot2 + redis + mysql + Echart',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-40-45.jpg`,
          list:[
            {
              title:'小程序:',
              isNoLink:true,
              url:'小程序搜索     [忠县家园]'
            }
          ]
        },
        {
          id:6,
          name:'淘个金/淘金时代 微信小程序 + springboot + vue管理端',
          desp:'一款根据实时行情进行金料锁价，并可购买金条等商品的小程序',
          technique:'Vue2 + uniapp + ElementUi + Webpack +  Springboot2 + redis + mysql + Echart',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-41-02.jpg`,
          list:[
            {
              title:'小程序:',
              isNoLink:true,
              url:'小程序搜索     [淘个金]'
            }
          ]
        },
        {
          id:7,
          name:'翠绿金业 android app + springboot后端 + vue管理端',
          desp:'一款行情展示、用于法人户进行黄金T+D交易的app。',
          technique:'Vue2 + Android + MpAndroidChart + Socket +java + kotlin',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-51-54.jpg`,
          list:[
            {
              title:'android app:',
              isNoLink:true,
              url:'应用市场搜索     [翠绿金业]'
            }
          ]
        },
        {
          id:7,
          name:'美颜视界 微信小程序 + springboot + vue管理端',
          desp:'一款AI美颜证件照的小程序',
          technique:'Vue2 + uniapp + uView + ElementUi  +  Springboot2 + redis + mysql + Echart',
          pic_url:`${curr_evn.imageUrl}/Snipaste_2025-03-11_15-43-35.jpg`,
          list:[
            {
              title:'小程序:',
              isNoLink:true,
              url:'小程序搜索     [美颜视界]'
            }
          ]
        },
      ],
      hobbyList:[
        {
          id: 0,
          name:'网球',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_1.jpg`,
          desp:'网球是从大一开始学的一项运动，也是大学坚持最久的运动之一，技术一般般，但水平不高的比赛还是可以上场的，希望工作之后还有时间继续打球'
        },
        {
          id: 1,
          name:'跑步',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_2.jpg`,
          desp:'跑步是从大一那年的冬天开始的，最长的记录是19年跑完了半程马拉松的21.0975km，这是一项不管我年龄多大都想坚持下去的运动'
        },
        {
          id: 2,
          name:'二次元',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_3.jpg`,
          desp:'海贼，火影，网球王子，柯南，妖尾，进击的巨人......，从初中开始，基本上把长篇都看遍啦，二次元给我的生活天机了不少乐趣'
        },
        {
          id: 3,
          name:'日语',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_4.jpg`,
          desp:'喜欢看动漫和听日语歌，所以就自然开始喜欢日语了，现在还只会基础，希望之后能有时间好好学学过N2吧'
        },
        {
          id: 4,
          name:'听音乐',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_5.jpg`,
          desp:'这个不用多说，各种各样的音乐我都喜欢，而且喜欢边学习边听，哈哈'
        },
        {
          id: 5,
          name:'看电影',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_6.jpg`,
          desp:'比较喜欢科幻片，虽然因为没钱，没在电影院没看过几部，但这也算一个爱好吧'
        },
        {
          id: 6,
          name:'骑车',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_7.jpg`,
          desp:'虽然我大学才雪会骑车，但看着别人出去远距离骑行也是挺羡慕的，希望有时间可以去试试'
        },
        {
          id: 7,
          name:'旅游',
          pic_url:`${curr_evn.imageUrl}/ic_bg_banner_8.jpg`,
          desp:'这只能算一个美好的愿望，等我有钱了，要去各种各样的地方玩，体验不一样的生活'
        },
      ],
    }
  },
  computed:{
    cardOpen(){
      return this.screenWidth >= 748;
    }
  },
  created() {
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    showSection(name) {
      this.showSectionId = name
    },
    // 屏幕尺寸变化的监听函数
    screenAdapter(){
      this.screenWidth = document.documentElement.clientWidth;
    }
  }
}
</script>

<style scoped lang="less">
  body {
    height: 100vh;
    overflow: hidden;
  }

  .box {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    color: #fff;
    width: 250px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(75, 75, 75, 0.9);

    nav {
      margin: 0;
      display: flex;
      list-style: none;
      flex-direction: column;

      a {
        font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
        list-style: none;
        box-sizing: border-box;
        text-decoration: none;
        color: #fff;
        padding: 1em;
        display: block;
        text-align: center;
        transition: background .3s, box-shadow .3s;
      }

      a:hover {
        background: rgba(60, 60, 60, 1);
      }
    }

    .avatar {
      width: 140px;
      height: 140px;
      margin: 1em auto;
      margin-top: 5em;
      background: #fff;
      border-radius: 100%;
      border: #fff 5px solid;
      transition: transform 0.5s;

      img {
        width: 100%;
        border-radius: 50%;
        /*transition: .6s;*/
      }

      img:hover {
        transform: rotate(360deg);
        transition: all 1.5s;
      }
    }
  }

  main {
    color: #353535;
    font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    box-sizing: border-box;
    margin-left: 250px;

    section {
      top: 50%;
      transform: translateY(-50%);
      position: relative;
      background-color: rgba(255, 255, 255, 0.8);
      border: 3px dashed rgba(0, 0, 0, 0.3);
      border-radius: 20px;
      padding: 20px;
      .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i{
          font-size: larger;
          margin-right: 10px;
        }
      }
      a{
        text-decoration: none;
      }
    }

    section:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-right: 20px solid rgba(0, 0, 0, 0.3);
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      top: 50%;
      transform: translateY(-50%);
      left: -20px;
    }

    #info {
      .warp {
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    #skills {
      .center-fixed {
        text-align: center;
        display: flex;
        flex-direction: column;

        .skills-icon {
          width: 100px;
          height: 100px;
          margin: 0 auto;
          background: #fff;
          border-radius: 100%;
          box-shadow: 0 5px rgba(0, 0, 0, 0.3);

          i {
            font-size: 50px;
            line-height: 100px;
            transition: all 1s;
          }

          .fa-html5 {
            content: "\f13b";
          }
        }

        .skills-icon:hover {
          i {
            transform: rotate(180deg);
            transition: all 1s;
          }
        }

      }

    }
    #works{
      .el-card /deep/ .el-card__body{
        padding: 0;
      }

      .works-item{
        margin-bottom: 20px;
        position: relative;
        .works-item-front,.works-item-back{
          background-color: white;
          text-align: center;
          border-radius: 5px;
          box-shadow: 0 0 5px 0 #ccc;
          border: 1px solid #5d5d5d;
          transition: all 1s;
          backface-visibility: hidden;
          width: 100%;
          height: 400px;
        }
        .works-item-front{
          .el-image{
            max-width: 100%;
            max-height: 320px;
            border-radius: 5px 5px 0 0;
          }
          p{
            color: #303133;
          }
        }
        .works-item-back{
          box-sizing: border-box;
          padding: 20px;
          position: absolute;
          top: 0;
          background: rgba(255, 255, 255, 0.8);
          transform: rotateY(180deg);
          text-align: left;
          .p_1{
            color: #6392f1;
            font-weight: bold;
          }
        }
      }
      .works-item:hover {
       .works-item-back{
          transform: rotateY(0deg);
        }
        .works-item-front{
          transform: rotateY(180deg);
        }
      }
    }

    #hobbys{
      .el-card /deep/ .el-card__body{
        padding: 0;
        height: 350px;
      }
      .hobby{
        opacity: 0.9;
        background-color: rgba(255,255,255,0.9);
        box-shadow: none;
        margin-bottom: 20px;
        border-radius: 20px;
        .el-image{
          width: 100%;
          max-height: 200px;
        }
        .tit{
          margin: 0 auto;
          line-height: 20px;
          text-align: center;
        }
        p{
          margin: 0;
          padding: 20px;
          font-size: medium;
        }
      }
    }
    #summary{
      ul{
        li{
          line-height: 50px;
          border-bottom: 2px dashed #63a35c;
          background-color: rgba(0,0,0,0.1);
          margin-bottom: 20px;
          border-radius: 9999px;
          list-style-type: circle;
        }
      }
    }
  }


  @media screen and (max-width: 768px){
    .sidebar{
      position: relative;
      top: 0;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      .avatar{
        margin: 1rem auto;
        width: 100px;
        height: 100px;
      }
      nav{
        background-color: rgba(255,255,255,0.1);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    main{
      margin: 0 auto;
      width: 100%;
      text-align: center;
      section{
        border-radius: 0;
        border: none;
      }
      #summary{
        ul{
          li{
            border-radius: 0;
            border-bottom: none;
            background-color: transparent;
            text-align: left;
          }
        }
      }
    }
  }

</style>
